<template>
    <!-- 自定义底部栏 -->
    <view>
        <view class="tabbar-panel">
            <view v-for="(item, index) in bottomMenus" :key="index" class="tabbar-item"
                :style="{ minHeight: `calc(98rpx + ${BottomBlackLineHeight})`}"
                @click="tabNav(index, item)">
                <view class="tabbar-img">
                    <text v-if="item.menu_unselected_icon"
                        class="iconMulti newShopIcon">{{ item.menu_unselected_icon }}</text>
                    <view class="img-box" v-else>
                        <image style="width: 50rpx; height: 50rpx"
                            :src="indexNav == index ? item.selectedIconPath : item.iconPath" mode="aspectFit" />
                    </view>
                </view>
                <view class="tabbar-text">
                    {{ item.menu_name }}
                </view>
                <view class="red-dot" v-if="item.count"></view>
            </view>
        </view>
        <!-- 高度补全 -->
        <!-- <view class="ft-hold"></view> -->
    </view>
</template>

<script>
    export default {
        name: "tabBar",
        props: {
            bottomMenus: {
                type: Array,
                default () {
                    return [];
                },
            },
            // 自定义颜色
            customColor: {
                type: String,
                default: ''
            }
        },
        // updated() {
        //     console.log("子组件接收的bottomMenus变化 :>> ", this.bottomMenus);
        // },
        data() {
            return {
                BottomBlackLineHeight:'',
                //   bottomMenus: [
                //     {
                //       wxapp_path: "",
                //       menu_name: "首页",
                //       is_needLogin: false,
                //       menu_unselected_icon: "\ueb4f",
                //     },
                //     {
                //       wxapp_path: "",
                //       menu_name: "项目",
                //       is_needLogin: false,
                //       menu_unselected_icon: "\ue60d",
                //     },
                //     {
                //       wxapp_path: "",
                //       menu_name: "商城",
                //       is_needLogin: false,
                //       menu_unselected_icon: "\ue699",
                //     },
                //     {
                //       wxapp_path: "",
                //       menu_name: "我的",
                //       is_needLogin: false,
                //       menu_unselected_icon: "\ue6c2",
                //     },
                //   ], // 底部菜单
                oldIndex: 0, //暂存索引
            };
        },
        computed: {
            indexNav() {
                return this.$store.getters.indexNav;
            },
        },
        created() {
            // 登录后继续跳转之前存取的索引
            uni.$on("loginSuccess", () => {
                uni.getStorageSync("AppCode") === "yzhvideo" ? "" : this.$store.commit("SET_INDEX", this
                    .oldIndex);
            });
            
            this.getMobileInfo()
        },
        destroyed() {
            uni.$off("loginSuccess");
        },
        methods: {
            getMobileInfo() {
                const mobileInfo = uni.getSystemInfoSync();
                let iphoneXArr = ["iPhone X", "iPhone 11", "iPhone 11 Pro Max"];
                iphoneXArr.forEach((item) => {
                    if (mobileInfo.model.search(item) !== -1) {
                        this.BottomBlackLineHeight = "50rpx";
                    }
                });
            },
            // 导航切换
            tabNav(index, item) {
                // if (!this.isLogin && item.is_needLogin) {
                //     if (uni.getStorageSync("AppCode") !== "yzhvideo") {
                //         uni.$emit("isNeedLoginEmit", true);
                //         return;
                //     }
                // }
                /*   if (uni.getStorageSync("AppCode") == "yzhvideo") {
                    if (!+this.teamConfig.is_staff) {
                        this.$u.toast("您还不是员工,请先申请成为员工！");
                        return;
                    }
                } */
                this.$store.commit("SET_INDEX", index);
            },
        },
    };
</script>

<style lang="scss">
    $imgWH: 50upx;

    .tabbar-mask {
        position: fixed;
        left: 0;
        top: 0;
        width: 100vw;
        height: 100vh;
        z-index: 9999;
        background-color: rgba(0, 0, 0, 0.4);
    }

    .tabbar-mask-panel {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 10001;

        .content {
            background-color: #ffffff;
            border-radius: 30upx 30upx 0 0;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;

            .close {
                font-size: 70upx;
                color: #999999;
                font-weight: 700;
                transform: rotate(45deg);
                margin-top: 100upx;
            }
        }

        .show {
            animation: showContent 0.3s both;

            @keyframes showContent {
                0% {
                    height: 0;
                }

                100% {
                    height: 40vh;
                }
            }
        }

        .hide {
            animation: hideContent 0.3s both;

            @keyframes hideContent {
                0% {
                    height: 40vh;
                }

                100% {
                    height: 0;
                }
            }
        }
    }

    .tabbar-panel {
        position: fixed;
        left: 0;
        bottom: 0;
        width: 100%;
        z-index: 20;
        display: flex;
        align-items: center;
        justify-content: space-between;
        border-top: 1upx solid #333;
        background-color: rgba(255, 255, 255, .95);

        &.tabbar-panel-dark {}

        .tabbar-item {
            flex: 1;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            // padding-bottom: 30upx;
            color: #333;
            position: relative;

            .red-dot {
                height: 15rpx;
                width: 15rpx;
                top: 14rpx;
                right: 34%;
                border-radius: 50%;
                background-color: red;
                position: absolute;
            }

            .tabbar-img {
                display: flex;
                align-items: center;
                justify-content: center;

                .newShopIcon {
                    font-size: 52rpx;
                    text-align: center;
                }

                .iconMulti {
                    width: 54upx;
                    height: 54upx;
                }

                .img-box {
                    height: 70rpx;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                }
            }

            .add {
                background-color: #ffffff;
                transform: translateY(-30%);
                border-radius: 50%;
                width: 110upx;
                height: 110upx;
                color: #121314;
                z-index: 10001;

                .newShopIcon {
                    font-size: 110upx;
                    width: unset;
                    height: unset;
                }
            }

            .tabbar-img-scan {
                width: $imgWH + 10upx;
                height: $imgWH + 10upx;
                display: flex;
                align-items: center;
                justify-content: center;

                image {
                    width: $imgWH + 10upx;
                    height: $imgWH + 10upx;
                }
            }

            .tabbar-text {
                color: var(--color);
                font-size: 22upx;
            }
        }
    }

    .ft-hold {
        height: $imgWH * 2.8;
    }
</style>
